<template>
    <div>

        <div class="container">
            <div class="table_btn">

                <label class="table-label">系统模块:</label>
                <el-input v-model="query.title"  placeholder="系统模块" class="menu-input" clearable></el-input>

                <label class="table-label">操作人员:</label>
                <el-input v-model="query.operName"  placeholder="操作人员" class="menu-input" clearable></el-input>

                <label class="table-label">操作类型:</label>
                <el-select class="menu-input"
                           v-model="query.businessTypes"
                           placeholder="请选择"
                           multiple
                           collapse-tags>
                    <el-option
                            v-for="item in businessTypeOpt"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key">
                    </el-option>
                </el-select>

                <label class="table-label">操作状态:</label>
                <el-select class="menu-input" v-model="query.status" placeholder="请选择">
                    <el-option
                            v-for="item in statusOpt"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key">
                    </el-option>
                </el-select>



                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>

                <el-button type="default" icon="el-icon-refresh" @click="searchReset">重置</el-button>

            </div>

            <div class="table_btn">
                <el-button type="success" icon="el-icon-edit" @click="clear()">清空</el-button>
                <el-button type="danger" icon="el-icon-delete"  @click="del()">删除</el-button>
            </div>

            <div class="box_table">
                <el-table
                        :data="tableData"
                        border
                        @selection-change="handleSelectionChange"
                        style="width: 100%">

                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>

                    <el-table-column
                            prop="oper_id"
                            label="日志编号"
                            width="50">
                    </el-table-column>

                    <el-table-column
                            prop="title"
                            label="系统模块">
                    </el-table-column>

                    <el-table-column
                            prop="business_type"
                            label="操作类型"
                            width="150">
                        <template slot-scope="scope">
                            {{businessTypeText(scope.row.business_type)}}
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="oper_name"
                            label="操作人员"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="dept_name"
                            label="部门名称"
                            width="100">
                    </el-table-column>


                    <el-table-column
                            prop="oper_ip"
                            label="主机"
                            width="120">
                    </el-table-column>

                    <el-table-column
                            prop="oper_location"
                            label="操作地点"
                            width="100">
                    </el-table-column>

                    <el-table-column
                            prop="status"
                            label="操作状态"
                            width="100">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.status === 1 ? 'primary' : 'success'"
                                    disable-transitions>{{scope.row.status === 1 ? '成功':'失败'}}
                            </el-tag>
                        </template>
                    </el-table-column>



                    <el-table-column
                            prop="oper_time"
                            label="登录时间"
                            :formatter="dateFormat">
                    </el-table-column>

                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">

                            <el-button
                                    size="mini"
                                    icon="el-icon-edit"
                                    type="primary"
                                    @click="detailsShow(scope.$index, scope.row)">
                                详 情
                            </el-button>

                        </template>
                    </el-table-column>

                </el-table>
            </div>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :total="pageTotal"
                        :current-page.sync="currentPage"
                        :page-size="pageSize"
                        @current-change="handlePageChange"></el-pagination>
            </div>
        </div>

        <!-- 详情 -->
        <el-dialog title="操作日志详细" :visible.sync="detailsVisible"  width="35%">
            <el-form ref="edit_form" label-width="100px">

                <el-form-item label="操作模块:">
                    {{details.title || ''}}
                </el-form-item>

                <el-form-item label="登录信息:">
                    {{details.oper_name || ''}}
                    /{{details.dept_name || ''}}
                    /{{details.oper_ip || ''}}
                    /{{details.oper_location || ''}}
                </el-form-item>

                <el-form-item label="请求方式:">
                    {{details.request_method || ''}}
                </el-form-item>

                <el-form-item label="操作方法:">
                    {{details.method || ''}}
                </el-form-item>

                <el-form-item label="请求参数:">
                    {{details.oper_param || ''}}
                </el-form-item>

                <el-form-item label="返回参数:">
                    {{details.json_result || ''}}
                </el-form-item>

                <el-form-item label="状态:">
                    {{details.status === 1 ? '成功':'失败'}}
                </el-form-item>

            </el-form>
        </el-dialog>

    </div>
</template>
<script>

    import utils  from "@/utils/function"
    const  { request,dateFormat } = utils
    import Paging from "@/utils/paging"
    import mixin from "@/utils/mixin"
    const paging = new Paging("/system/monitor/operlog/list")

    export default {
        mixins: [mixin],
        data() {

            return {
                detailsVisible:false,
                tableData: [],
                pageTotal: 0,
                multipleSelection:[],           //列表中checkbox选中的值
                query: {                        //查询数据
                    title:"",
                    operName:"",
                    businessTypes:"",
                    status:""
                },
                jobGroupOptions:[],
                statusOptions:[],

                jobGroupFormOptions:[],
                statusFormOptions:[],
                jobPolicyFormOptions:[],

                jobGroupEditFormOptions:[],
                jobStatusEditFormOptions:[],
                jobPolicyEditFormOptions:[],

                businessTypeOpt:[           //操作类型
                    {key:"1",value:'新增'},
                    {key:"2",value:'修改'},
                    {key:"3",value:'删除'},
                    {key:"4",value:'授权'},
                    {key:"5",value:'导出'},
                    {key:"6",value:'导入'},
                    {key:"7",value:'强退'},
                    {key:"8",value:'生成代码'},
                    {key:"9",value:'清空数据'}

                ],
                statusOpt:[
                    {key:"",value:'所有'},
                    {key:"1",value:'成功'},
                    {key:"0",value:'失败'},
                ],
                currentPage:1,
                pageSize:5,
                details:{

                }

            }
        },
        created() {
            this.getList({page:1,pageSize:this.pageSize})
        },
        methods: {
            detailsShow(index,row){
                request.loading().get('/system/monitor/operlog/detail',{id:row.oper_id}).then(res=>{
                    let {code,data:{info},msg} = res
                    if(code ===0) {
                        this.details = info
                        this.detailsVisible = true
                    }

                })

            },
            businessTypeText(key){
                let obj  = _.find(this.businessTypeOpt,o=> o.key == (key+''))
                if(obj){
                    return obj.value
                } else {
                    return '无'
                }

            },
            clear(){
                this.$confirm('此操作将清除所有数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.loading().post("/system/monitor/operlog/clear").then(response=>{
                        let {code,data,msg} = response
                        if(code === 0){
                            this.getList({page:1})
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message.error(msg);
                        }
                    }).catch(error=>{
                        console.log(error);
                    });

                })
            },
            del(id){
                if(id){
                    this._del(id)
                } else {
                    if(this.multipleSelection.length < 1){
                        this.$message.error('选择要删除的数据');
                        return ;
                    }

                    this._del(this.multipleSelection.map(value => value.oper_id))
                }
            },
            _del(ids){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if(_.isNumber(ids)){
                        ids = [ids]
                    }
                    if(!_.isArray(ids)){
                        return false;
                    }
                    request.loading().post("/system/monitor/operlog/delete",{ids:ids}).then(response=>{
                        let {code,data,msg} = response
                        if(code === 0){
                            this.getList({page:this.currentPage})
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message.error(msg);
                        }
                    }).catch(error=>{
                        console.log(error);
                    });

                }).catch((error) => {
                    console.log(error);
                    this.$message({
                        type: 'info',
                        message: '删除失败，请重试!'
                    });
                });
            },
            handlePageChange(val) {             //获取分页数据
                this.currentPage = val
                this.getList({page:val})
            },
            handleSearch(){             //查询
                paging.setQuery( _.cloneDeep(this.query) );
                this.handlePageChange(1)
            },
            searchReset(){                  //查询重置
                _.forOwn(this.query,(value, key)=>{
                    this.$set(this.query,key,'')
                })
                this.handleSearch()
            },
            getList(param){           //获取列表数据
                paging.request(param).then(response=>{
                    let {code,data:{total,list,searchStatus},msg} = response
                    if(code === 0){
                        this.pageTotal = total
                        if(_.isArray(list) && list.length > 0){
                            this.tableData = list
                        } else {
                            this.tableData = []
                        }

                        if(_.isArray(searchStatus.values)){
                            this.statusOptions = searchStatus.values
                        }

                    } else {
                        this.$message.error(msg);
                    }
                }).catch(error=>{
                    console.log(error);
                });
            },

            handleSelectionChange(val) {        //列表中checkbox选中事件
                this.multipleSelection = val;
            }
        }

    }
</script>
<style lang="scss" scoped>

</style>
